<template>
  <div class="p-6 bg-gray-50 min-h-screen max-w-7xl mx-auto">
    <!-- 顶部标题和查询区域 -->
    <div class="mb-6 bg-white rounded-lg shadow-sm p-5">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
        <h2 class="text-2xl font-bold text-gray-800">
          签到统计
        </h2>
      </div>
    </div>

    <!-- 统计信息卡片 - 两行两列布局 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">
      <!-- 已签到卡片 -->
      <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500">
        <div class="flex flex-col h-full">
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">已签到</p>
          <div class="mt-2 flex items-center">
            <h3 class="text-4xl font-bold text-green-600 mr-3">{{ checkedInStudents.length }}</h3>
            <span class="text-green-500 text-2xl">✓</span>
          </div>
          <div class="mt-4">
            <span class="text-sm font-medium text-gray-500">签到率</span>
            <p class="text-lg font-semibold text-gray-800">
              {{ ((checkedInStudents.length / checkList.length) * 100).toFixed(1) }}%
            </p>
          </div>
        </div>
      </div>

      <!-- 未签到卡片 -->
      <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-red-500">
        <div class="flex flex-col h-full">
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">未签到</p>
          <div class="mt-2 flex items-center">
            <h3 class="text-4xl font-bold text-red-600 mr-3">{{ notCheckedInStudents.length }}</h3>
            <span class="text-red-500 text-2xl">✗</span>
          </div>
          <div class="mt-4">
            <span class="text-sm font-medium text-gray-500">未签到率</span>
            <p class="text-lg font-semibold text-gray-800">
              {{ ((notCheckedInStudents.length / checkList.length) * 100).toFixed(1) }}%
            </p>
          </div>
        </div>
      </div>

      <!-- 总人数卡片 -->
      <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-500">
        <div class="flex flex-col h-full">
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">总人数</p>
          <div class="mt-2 flex items-center">
            <h3 class="text-4xl font-bold text-blue-600 mr-3">{{ checkList.length }}</h3>
            <span class="text-blue-500 text-2xl">👤</span>
          </div>
          <div class="mt-4">
            <span class="text-sm font-medium text-gray-500">班级数</span>
            <p class="text-lg font-semibold text-gray-800">{{ getUniqueClassCount() }}</p>
          </div>
        </div>
      </div>

      <!-- 签到进度卡片 -->
      <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-500">
        <div class="flex flex-col h-full">
          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">签到进度</p>
          <div class="mt-2 flex items-center">
            <h3 class="text-4xl font-bold text-purple-600 mr-3">
              {{ ((checkedInStudents.length / checkList.length) * 100).toFixed(1) }}%
            </h3>
            <span class="text-purple-500 text-2xl">⏱️</span>
          </div>
          <div class="mt-4 w-full">
            <el-progress
                :percentage="Number(((checkedInStudents.length / checkList.length) * 100).toFixed(1))"
                :color="progressColor"
                :stroke-width="10"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="bg-white rounded-lg shadow-sm p-5">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="已签到学生" name="checked">
          <div class="pt-4">
            <el-table
                :data="checkedInStudents"
                style="width: 100%"
                size="large"
                :header-cell-style="{
                background: '#f8fafc',
                color: '#1e293b',
                height: '50px',
                fontWeight: 'bold'
              }"
            >
              <el-table-column prop="studentNumber" label="学号" min-width="120" />
              <el-table-column prop="studentName" label="姓名" min-width="100">
                <template #default="{ row }">
                  <span class="font-medium">{{ row.studentName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="className" label="班级" min-width="160">
                <template #default="{ row }">
                  <el-tag size="default" effect="plain">{{ row.className }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="checkTime" label="签到时间" min-width="180">
                <template #default="{ row }">
                  <div class="flex items-center">
                    <span class="mr-2 text-gray-400">⏱️</span>
                    <span>{{ formatDateTime(row.checkTime) }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="未签到学生" name="not-checked">
          <div class="pt-4">
            <el-table
                :data="notCheckedInStudents"
                style="width: 100%"
                size="large"
                :header-cell-style="{
                background: '#f8fafc',
                color: '#1e293b',
                height: '50px',
                fontWeight: 'bold'
              }"
            >
              <el-table-column prop="studentNumber" label="学号" min-width="120" />
              <el-table-column prop="studentName" label="姓名" min-width="100">
                <template #default="{ row }">
                  <span class="font-medium">{{ row.studentName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="className" label="班级" min-width="160">
                <template #default="{ row }">
                  <el-tag size="default" effect="plain" type="info">{{ row.className }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="checkStatus" label="状态" min-width="120">
                <template #default="{ row }">
                  <el-tag type="danger" effect="dark" class="flex items-center w-24 justify-center">
                    <span class="mr-1">⚠️</span>
                    {{ row.checkStatus }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 模拟数据
const mockCheckStatus = [
  { studentNumber: '1001', studentName: '张三', className: '计算机1班', checkStatus: '已签到', checkTime: '2024-01-01 10:00:00' },
  { studentNumber: '1002', studentName: '李四', className: '计算机1班', checkStatus: '未签到', checkTime: null },
  { studentNumber: '1003', studentName: '王五', className: '计算机2班', checkStatus: '已签到', checkTime: '2024-01-01 10:05:00' },
  { studentNumber: '1004', studentName: '赵六', className: '计算机2班', checkStatus: '未签到', checkTime: null },
]

const mockCheckTask = {
  taskType: 3
}

const checkList = ref([])
const activeTab = ref('checked')
const loading = ref(false)
const checkType = ref(null)

const checkedInStudents = computed(() => {
  return checkList.value.filter(student => student.checkStatus === '已签到')
})

const notCheckedInStudents = computed(() => {
  return checkList.value.filter(student => student.checkStatus === '未签到')
})

// 进度条颜色
const progressColor = computed(() => {
  const percentage = (checkedInStudents.value.length / checkList.length) * 100
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
})

const getUniqueClassCount = () => {
  const uniqueClasses = new Set(checkList.value.map(student => student.className))
  return uniqueClasses.size
}

const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 模拟数据加载
const fetchData = async () => {
  loading.value = true
  try {
    checkList.value = mockCheckStatus
    checkType.value = mockCheckTask.taskType
    console.log('模拟数据加载成功')
  } catch (error) {
    console.error('模拟数据加载失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 卡片基础样式 */
.bg-white {
  background-color: #ffffff;
}

.rounded-xl {
  border-radius: 1rem;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.p-6 {
  padding: 1.5rem;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-green-500 {
  border-color: #10B981;
}

.border-red-500 {
  border-color: #EF4444;
}

.border-blue-500 {
  border-color: #3B82F6;
}

.border-purple-500 {
  border-color: #8B5CF6;
}

/* 卡片内容布局 */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.h-full {
  height: 100%;
}

/* 文字样式 */
.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-gray-500 {
  color: #6B7280;
}

.text-gray-800 {
  color: #1F2937;
}

.text-green-600 {
  color: #059669;
}

.text-red-600 {
  color: #DC2626;
}

.text-blue-600 {
  color: #2563EB;
}

.text-purple-600 {
  color: #7C3AED;
}

.text-green-500 {
  color: #10B981;
}

.text-red-500 {
  color: #EF4444;
}

.text-blue-500 {
  color: #3B82F6;
}

.text-purple-500 {
  color: #8B5CF6;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* 间距 */
.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

/* 网格布局 */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sm\:grid-cols-2 {
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gap-5 {
  gap: 1.25rem;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
}
</style>